<template>
  <div>
    <div class="search">
      <input
        class="input"
        type="text"
        placeholder="输入订单号/手机号"
        placeholder-style="color:#cccccc"
        v-model="filterVal"
        confirm-type="search"
        @confirm="handleSearch"
        @change="filterValChange"
      />
      <icon class="searchClick" type="search" size="20" color="#cccccc" />
    </div>
    <div class="tatle">
      <p :class="shippingMode === '1' ? 'tatleOpt' : 'tatleNot'">
        <span @click="tatleClick('1')">到店自提</span>
      </p>
      <p :class="shippingMode === '2' ? 'tatleOpt' : 'tatleNot'">
        <span @click="tatleClick('2')">商家上门</span>
      </p>
    </div>
    <scroll-view
      class="scroll-wrap no-scroll-bar"
      style="height:calc(100% - 30px - 77px)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div class="shopsList" v-for="(item,index) in shopsList" :key="index">
        <div class="shopsListLeft">
          <!-- <div class="shopsImgBox">
            <img />
          </div>-->
          <div class="shopsCont">
            <span>订单号：{{item.orderNo}}</span>
            <p v-if="item.addressContact">收货人：{{item.addressContact}}</p>
            <p v-else></p>
            <label>核销方式：{{item.shippingMode === '1' ? '到店自提' : '商家上门'}}</label>
          </div>
        </div>
        <div class="shopsIcoBox">
          <span>已核销</span>
          <!-- <span>{{shopForm[item.orderType]}}</span> -->
          <p>{{item.orderDate}}</p>
        </div>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import { FIND_SHOP_ORDER_PAGE } from '@/api'
export default {
  components: {},
  data () {
    return {
      shopsList: [],
      currentPage: 1,
      alreadyLastPage: false,
      shopForm: {
        shop: '普通订单',
        platform: '平台订单',
        offline: '线下收款码',
        group: '拼团订单'
      },
      shippingMode: '1',
      filterVal: ''
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  created () {},
  onShow () {
    this.init()
    this.shippingMode = '1'
    this._getShopOrderList()
  },
  methods: {
    handleSearch () {
      this.currentPage = 1
      this.shopsList = []
    },
    filterValChange (e) {
      this.filterVal = e.target.value
      this._getShopOrderList()
    },
    tatleClick (val) {
      const vm = this
      vm.init()
      vm.shippingMode = val
      vm._getShopOrderList()
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._getShopOrderList()
      }
    },
    _getShopOrderList () {
      const vm = this
      let params = {
        state: '3,7',
        shippingMode: vm.shippingMode,
        shopId: vm.account.shopId
      }
      if (vm.filterVal) {
        if (vm.filterVal.length === 11) {
          params.phone = vm.filterVal
        } else {
          params.orderNo = vm.filterVal
        }
      }
      FIND_SHOP_ORDER_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      if (isFirst) {
        this.shopsList = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage = true
        } else {
          // has next page
          this.alreadyLastPage = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.shopsList.push(...list)
        this.alreadyLastPage = true
      } else {
        // middle page
        this.shopsList.push(...list)
        this.alreadyLastPage = false
        this.currentPage += 1
      }
    },
    init () {
      const vm = this
      vm.shopsList = []
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.filterVal = ''
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  position: relative;
  .input {
    width: 200px;
    height: 30px;
    padding-left: 55px;
    font-size: 14px;
    color: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 25px;
    background: #999;
  }
  .searchClick {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 5;
  }
}
.tatle {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  p {
    width: 50%;
    text-align: center;
  }
  .tatleOpt {
    display: flex;
    justify-content: center;
    span {
      color: $blue;
      line-height: 20px;
      width: 70px;
      border-bottom: 1px solid $blue;
      display: block;
    }
  }
  .tatleNot {
    display: flex;
    justify-content: center;
    span {
      color: #a9a9a9;
    }
  }
}
.shopsList {
  width: 350px;
  height: 60px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  .shopsListLeft {
    display: flex;
    .shopsImgBox {
      img {
        width: 60px;
        height: 60px;
      }
    }
    .shopsCont {
      width: 200px;
      font-size: 12px;
      line-height: 12px;
      color: #000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 5px;
    }
  }
  .shopsIcoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    span {
      color: #27a440;
    }
    p {
      margin-top: 8px;
      color: #a9a9a9;
    }
  }
}
.end-tip {
  margin: 0;
  padding: 15px;
  text-align: center;
  color: #a9a9a9;
  font-size: 15px;
}
</style>
